<template>
  <!-- <div class="revertAutoScaleView relative z-30" @mouseout="onMouseOut" @mouseover="onMouseover">
    <a-popover title="Title" :visible="visible" :getPopupContainer="getPopupContainer">
      <template #content>
        <div class="h-32">
          <a-select class="w-full">
            <a-select-option value="jack">Jack</a-select-option>
            <a-select-option value="lucy">Lucy</a-select-option>
          </a-select>
        </div>
      </template>
      <span @mouseover="showPopover">忍</span>
    </a-popover>
  </div> -->
  <Popover01></Popover01>
</template>

<script setup lang="ts">
const visible = ref<boolean>(false)

function showPopover() {
  visible.value = true
}
function getPopupContainer(triggerNode: HTMLElement) {
  return triggerNode.parentElement || document.body
}
function onMouseOut(e: MouseEvent) {
  console.log(e)
  //   hide()
}
let hideTimeoutFlag: number | undefined
function hide() {
  hideTimeoutFlag = setTimeout(() => (visible.value = false), 300)
}
function show() {
  if (hideTimeoutFlag) {
    clearTimeout(hideTimeoutFlag)
  }
  visible.value = true
}
function onMouseover() {
  show()
}
</script>

<style scoped></style>
